<template>

	<view>
		<!-- <nav-bar :titleCenter="true" backState="2000" :bgColor="['#FFFFFF','#FFFFFF']" bgColorAngle="90" fontColor="#000"
		 title="南疆比武">
			<view class="preview tab-left-icon iconfont icon-left" slot="left" @click="goback"></view>
			<view slot="right" class="search_box" style="margin-right: 10rpx;">
				<view style="font-size:43rpx;" class="preview tab-right-icon grace-icons icon-add grace-bold" @click="btnClick"></view>
			</view>
		</nav-bar> -->
		<u-sticky bgColor="#fff">
			
			<u-tabs lineColor='#1cb8a7' :list="typeList" :current='activeIndex' @change='getIndex'>
				<view slot="right" style="padding-left: 4px;" @tap="selectNav">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</u-sticky>
		<view class="banner  grace-margin" v-for="(value,key) in dataList" :key="key"
			@click="goDetail(value)">
			<!-- <view class="grace-padding-p grace-title" >
				<text style="color: #00006a;">管理员</text>
				<text class="grace-gray">1小时前</text>
			</view> -->
			
			<u--image width="100%" height="200px" :radius='5' :lazy-load="true" mode="aspectFill"
				v-if="value.newsCoverImg" :showLoading="true" :src="value.newsCoverImg"></u--image>
			

			<view class="img-title grace-padding-p">
				{{value.newsTitle}}
			</view>
			<!-- <view class="img-Detail">
				{{value.foodsDetail}}
			</view> -->
		</view>
		<u-loadmore :status="status" />
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="popupContent">
				<view class="u-page__tag-item" v-for="(item, index) in columnList" :key="index">
					<u-tag borderColor='#1cb8a7' :bgColor='columnIndex==index?"#1cb8a7":"#fff"'
						:color='!columnIndex==index?"#1cb8a7":"#fff"' :text="item.name" :plain="!columnIndex!=index" type="warning"
						:name="index" @click="radioClick(item,index)">
					</u-tag>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		pageSchoolNews
	} from "@/api/SchoolNews.js";
	import {
		schoolColumnTree
	} from "@/api/schoolColumn.js"
	import easyLoadimage from '../components/easy-loadimage/easy-loadimage.vue';

	export default {
		name: "news",
		data() {
			return {

				typeList: [],
				dataList: [],
				status: 'loadmore',
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				show: false,
				activeIndex: 0,
				scrollTop: 0,
				columnList:[],
				totalList:[],
				columnIndex:0
			}
		},
		
		components: {
			// graceFullLoading,
			// graceLoading,
			// graceSwiper,
			// gracePage,
			easyLoadimage
		},
		onReachBottom: function() {
			//避免多次触发
			if (this.loadingType == 1 || this.loadingType == 2) {
				return;
			}
			this.loadMoreFunc();
		},
		filters: {
			foodstype: (val, arr) => {
				var temp = arr.filter((e) => {
					return e.code == val;
				})
				if (temp.length <= 0) {
					return "";
				}
				return temp[0].name;
			},
		},

		onLoad(op) {
			this.initParams();
			console.log('op22222',op)
			this.getSchoolColumnTree()
			// this.params.parentId=op.parentId
			
			
			// this.foodstype();
		},
		methods: {
			getIndex(e) {
				this.initParams();
				this.activeIndex=e.index;
				this.params.columnId = this.typeList[e.index].id
				this.getData(this.params)
			},
			radioClick(it, i) {
				
				this.initParams();
				this.typeList=[]
				this.columnIndex = i;
				this.totalList[this.columnIndex].children.forEach(it=>{
					this.typeList.push({name:it.columnName,id:it.id})
				})
				uni.setNavigationBarTitle({
					title:this.columnList[this.columnIndex].name
				});
				this.params.columnId=this.typeList[this.activeIndex].id
				this.getData(this.params)
				this.show = false
			},
			selectNav() {
				console.log()
				this.show = true

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			async getSchoolColumnTree(pa) {
				const {
					data
				} = await schoolColumnTree(pa)
				if (data.code == 0) {
					if (data.data.length) {
						this.totalList=data.data;
						this.totalList.forEach(it => {
							this.columnList.push({name:it.columnName,id:it.id})
						})
						uni.setNavigationBarTitle({
							title:this.columnList[this.columnIndex].name
						});
						if(this.totalList[this.columnIndex].children.length){
							this.totalList[this.columnIndex].children.forEach(it=>{
								this.typeList.push({name:it.columnName,id:it.id})
							})
							this.params.columnId=this.typeList[this.activeIndex].id
							this.getData(this.params);
						}else{
							this.$api.showTip('暂无栏目')
						}
						
					}else{
						this.$api.showTip('暂无数据')
					}

				} else {
					this.$api.showTip('请稍后重试')
				}
				console.log('data2222222', this.typeList)
			},
			initParams() {
				this.dataList = [];
				// this.loadingType = 4;
				this.activeIndex=0;
				this.params.pageNum = 1;
				this.pageMore = true;
			},
			// 查询栏目
			pathRes(data) {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				console.log('数据受222222222', data)
				if (data.code == 0) {
					uni.hideLoading();
					if (data.data.list.length == 0) {
						this.dataList = data.data.list
						// this.loadingType = 3;
						this.status = 'nomore'
						return;
					}
					if (data.data.isLastPage) {
						this.pageMore = false;
						this.dataList = this.dataList.concat(data.data.list);
						// this.loadingType = 2;
						this.status = 'nomore'
					} else {
						if (data.data.isFirstPage) {
							this.dataList = data.data.list;
						} else {

							this.dataList = this.dataList.concat(data.data.list);
							console.log('不是第一页', this.dataList)
						}
						this.params.pageNum++;
						// this.loadingType = 0;
					}
					console.log('this.dataList', this.dataList)

					console.log('显示数据', this.dataList)
				} else {
					this.$api.showTip(res.data.msg);
				}
			},
			goDetail(e) {
				var json = JSON.stringify(e);
				if (json && json != "{}") {
					uni.navigateTo({
						url: "detail?detailDate=" + encodeURIComponent(json)
					})
				}
			},
			async getData(pa) {
				this.dataList = []
				const {
					data
				} = await pageSchoolNews(pa)
				console.log('返回数据', data.data)
				
				
				this.pathRes(data)

			},
			formattime(time) {
				// let ttDate = time;
				let ttDate = time.replace(/(\d{4}).(\d{1,2}).(\d{1,2})/mg, '$1年$2月$3日');
				return ttDate;

			},
			foodstype() {
				let that = this;
				foodstype().then(
					res => {
						if (res.data.code == "0") {
							console.log("dddd", res);
							that.footstypelist = res.data.data;
							// let foodtypelist = res.data.data;
							// foodtypelist.forEach(function(item,index){
							// 	that.footstypelist.push({name: item.name, value: item.code, checked: false});
							// });
						} else {
							that.$api.showTip(res.data.msg);
						}
					},
					err => {
						that.$api.showTip('服务器错误');
					}
				);
			},
			loadMoreFunc: function() {
				if (!this.pageMore) {
					this.loadingType = 2;
					return;
				}
				this.getData(this.params);
			},
			swiperchange: function(e) {
				console.log(e);
			},
			btnClick() {
				uni.navigateTo({
					url: "tournamentAdd"
				})
			},
			goback() {
				uni.navigateTo({
					url: "../policeSafeguards/performance_page"
				})
			},
		}
	}
</script>

<style scoped lang="less">
	/deep/ .u-tabs {
		padding: 0 24rpx 0rpx 15rpx;
	}

	.u-page__tag-item {

		display: inline-block;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.popupContent {
		height: 400rpx;
		padding: 80rpx 30rpx;
	}

	.banner {
		padding: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 15rpx;
	}

	.grace-padding-p {
		padding: 10rpx 20rpx 20rpx 20rpx;

	}

	.img-radius-hw {
		border-radius: 14rpx;
		background-position: center center;
		width: 100%;
		height: 350rpx;

	}

	.img-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		margin-top: 26rpx;
		letter-spacing: 1rpx;
	}

	.fabiao {
		padding: 0 10rpx;
	}

	.grace-title {
		font-weight: normal;
	}

	.img-Detail {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-indent: 2em;
	}


	/deep/.loading-img {
		height: 350rpx;
		border-radius: 14rpx;
	}

	/deep/.origin-img {
		border-radius: 4rpx;
		height: 275rpx !important;
		width: 100%;
		background-size: contain;
		display: flex;
		justify-content: center;
		align-items: center;
		display: block;
	}
</style>